<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img class="img1" src="" alt="">
    <p class="name"></p>
    <script>
        // 页面中要用的数据，用来渲染页面
        var pageData = []
        // 1、创建对象
        var ajax_ = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTT');
        //2、建立连接
        // ajax_.open('get','./demo.txt',true);
        // open的第一个参数是请求的方式--get、post、delete等
        // open的第二个参数是请求的地址，接口地址
        ajax_.open('get', 'http://localhost:3000/useing/master', true);

        //3、发送请求
        ajax_.send();

        //4、接收服务器数据
        ajax_.onreadystatechange = function () {
            /*  if(ajax_.readyState==4 &&ajax_.status == 200 ){
                 console.log(ajax_.responseText);
             } */

            if (ajax_.readyState == 4) {
                if (ajax_.status == 200) {
                    // console.log(ajax_.responseText);
                    pageData = JSON.parse(ajax_.responseText);
                    console.log(pageData);
                    // 这个函数专门用来渲染页面
                    renderPage()
                } else {
                    console.log('获取连接失败');
                }
            }
        }

        function renderPage() {
            // 获取图片元素
        var img = document.querySelector('.img1');
        // 修改src属性
        img.setAttribute('src', pageData[5].img)
        // 显示名称--先获取元素
        var p = document.querySelector('.name');
        p.innerHTML = pageData[5].text;
        }
        </script>
</body>

</html>